import { StyleSheet,Text,View,Image,TextInput,TouchableOpacity,ImageBackground} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
import { AntDesign } from '@expo/vector-icons';
import { SimpleLineIcons } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { MaterialIcons } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Feather } from '@expo/vector-icons';
import React,{useLayoutEffect,useState,useEffect} from 'react';
import Modify from './Modify';
import Login from './login';
import './global';


const User=({navigation})=>{
    const [user,setUser] = useState([]);
    const [messagecount,setMessagecount] = useState([]);
    useEffect(()=>{
        fetch("https://cnodejs.org/api/v1/user/HL1115")
            .then(res=>res.json())
            .then(res=>{
                setUser(res.data);
            });
    },[])
    useEffect((()=>{
        fetch("https://cnodejs.org/api/v1//message/count?accesstoken=e73b268b-f5d2-4ff1-8fd9-3581b84962e2")
        .then(res=>res.json())
        .then(res=>{
            setMessagecount(res.data);
        },[]);
    }),[])

    return(
        <View style={{backgroundColor:'white',height:'100%',width:'100%'}}>
            <View style={styles.header}>
                <Text style={styles.login} onPress={() =>navigation.navigate('Login')}>登录</Text>
            </View>
            <View style={{height:p2d(450),}}>
                <ImageBackground
                    source={require("../assets/bg.png")}
                    style={{height:p2d(250),width:'100%',position:'absolute',opacity:0.7}}>
                   
                </ImageBackground>
                <View style={{height:p2d(250),}}>
                        <View style={{height:p2d(250),width:p2d(250),marginLeft:p2d(100),marginTop:p2d(40)}}>
                            <Image 
                                source={{uri:user.avatar_url}}
                                style={{height:p2d(150),width:p2d(150),borderRadius:p2d(75),borderWidth:p2d(5),borderColor:'white'}}
                            />
                        </View>
                        <Text style={styles.username}>{user.loginname}</Text>
                        <Text style={styles.person}>这个人很懒什么都没有留下</Text>
                    </View>
                    
                <View style={styles.grey}>
                    <View style={styles.collection}>
                        <Text style={styles.star}><Entypo name="star" size={p2d(35)} color="black" /></Text>
                        <Text style={styles.font}>收藏</Text>
                    </View>
                    <View style={styles.num}>
                        <Text style={styles.fontnum}>{user.score}</Text>
                        <Text style={styles.font}>关注</Text>
                    </View>
                    <View style={styles.title}>
                        <Text style={styles.fontnum}>{user.recent_topics?user.recent_topics.length : ""}</Text>
                        <Text style={styles.font}>粉丝</Text>
                    </View>
                </View>



            </View>

            <View style={styles.textview}>
            <MaterialIcons name="person-search" size={p2d(45)} color="#5B5B5B" style={{top:p2d(30)}} />
                <Text style={styles.text} onPress={() =>navigation.navigate('Modify')}>修改个人资料</Text>
                <AntDesign name="right" size={p2d(35)} color="#7B7B7B" style={styles.right}/>
            </View>

            <View style={styles.textview}>
                <MaterialCommunityIcons name="account-lock" size={p2d(45)} color="#5B5B5B" style={{top:p2d(30)}} />
                <Text style={styles.text}>修改密码</Text>
                <AntDesign name="right" size={p2d(35)} color="#7B7B7B" style={styles.right}/>
            </View>

            <View style={styles.textview}>
                <MaterialCommunityIcons name="subtitles-outline" size={p2d(45)} color="#5B5B5B" style={{top:p2d(30)}} />
                <Text style={styles.text}>我的文章</Text>
                <AntDesign name="right" size={p2d(35)} color="#7B7B7B" style={styles.right}/>
            </View>


            <View style={styles.textviewlast}>
                <Feather name="settings" size={p2d(35)} color="#5B5B5B" style={{top:p2d(30)}}/>
                <Text style={styles.text}>设置</Text>
                <AntDesign name="right" size={p2d(35)} color="#7B7B7B" style={styles.right}/>
            </View>
            <TouchableOpacity
                onPress={()=>{
                    AsyncStorage.removeItem('install')
                }}
            >
                <Text>退出</Text>
            </TouchableOpacity>
        
           

        </View>
    )
}

const styles = StyleSheet.create({
    header:{
        height:p2d(100),
        backgroundColor:'white'
    },
    login:{
        position:'absolute',
        fontSize:p2d(30),
        right:p2d(20),
        bottom:p2d(20),
    },
    text:{
        position:'absolute',
        left:p2d(50),
        fontSize:p2d(30),
        color:'#5B5B5B',
        lineHeight:p2d(100),
    },
    textview:{
        height:p2d(100),
        width:p2d(720),
        left:p2d(40),
        backgroundColor:'white',
        borderBottomWidth: p2d(2),
        borderBottomColor:'#CC99FF',

    },
    textviewlast:{
        height:p2d(100),
        width:p2d(720),
        left:p2d(40),
        backgroundColor:'white',
    },
    right:{
        position:'absolute',
        right:p2d(30),
        top:p2d(30),
      },
    fontright:{
        position:'absolute',
        right:p2d(30),
        top:p2d(30),
        fontSize:p2d(30),
        color:'#7B7B7B',
    },
    grey:{
        position:'absolute',
        height:p2d(150),
        width:p2d(800),
        marginTop:p2d(280),
        backgroundColor:'#DCDCDC',

    },
    collection:{
        position:'absolute',
        height:p2d(100),
        width:p2d(175),
        marginLeft:p2d(75),
        marginTop:p2d(25),
        borderRightWidth:p2d(2),

    },
    num:{
        position:'absolute',
        height:p2d(100),
        width:p2d(175),
        marginLeft:p2d(320),
        marginTop:p2d(25),
        borderRightWidth:p2d(2),
    },
    title:{
        position:'absolute',
        height:p2d(100),
        width:p2d(100),
        marginTop:p2d(25),
        marginLeft:p2d(550),
    },
    font:{
        height:p2d(40),
        width:p2d(100),
        fontSize:p2d(25),
        color:'#5B5B5B',
        textAlign:'center',
    },
    username:{
        width:p2d(200),
        fontSize:p2d(40),
        position:'absolute',
        color:'black',
        left:p2d(270),
        top:p2d(70),
    },
    person:{
        width:p2d(200),
        fontSize:p2d(25),
        position:'absolute',
        color:'black',
        left:p2d(270),
        top:p2d(120),

    },
    fontnum:{
        height:p2d(40),
        width:p2d(100),
        fontSize:p2d(30),
        color:'black',
        textAlign:'center',

    },
    star:{
        height:p2d(40),
        width:p2d(100),
        color:'black',
        textAlign:'center',

    },
});


export default User;

